<template>
	<view class="index">
		<!-- #fc4a17导航栏#007AFF -->
		<!-- <al-navbar bgColor="#8F4B2B" goPage="/pages/search/search" @rightClick="toMessage"></al-navbar> -->
		<al-nav-bar></al-nav-bar>
		<!-- <uni-nav-bar :statusBar :border="false" left-text="返回" right-text="设置" title="导航栏组件" /> -->
		<!-- tab选项卡 -->
		<view style="padding: 0 20rpx;background-color: #8F4B2B;color: #fff;position: relative;border: none;">
			<al-tabs :list="tabList" bg="#8F4B2B" :current="tabCurrent" @change="tabChange"></al-tabs>
		</view>
		<view v-if="!tabCurrent">
			<!-- 轮播图 -->
			<view class="banner-box">
				<view v-if="!tabCurrent" class="bor-bg"></view>
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000"
					:duration="500">
					<swiper-item v-for="(item,index) in banners" :key="index">
						<view class="swiper-item">
							<image @click="bannerClick(index)" :src="item.topicImage" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view style="padding: 20rpx;">
				<uni-notice-bar scrollable single showIcon :speed="60" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
				<!-- 宫格导航栏 -->
				<view class="al-box">
					<al-grid :column="5" :list="gradList"></al-grid>
				</view>
				<view class="between-line" style="margin: 50rpx 0 30rpx 0;">
					<view class="line"></view>
					<text>精品推荐</text>
					<view class="line"></view>
				</view>
				<al-glist :data="dayBlastList" clickUrl="/pages/show/show" :reflectKey="reflectKey"></al-glist>
			</view>
		</view>
		<!-- 分类吧 -->
		<view v-else>
			<view class="category">
				<al-glist :data="goodsByCategory" clickUrl="/pages/show/show" :reflectKey="reflectKey"></al-glist>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCategories,getBanners,getDayBlast} from '@/apis/common.js'
	import {getGoods} from '@/utils/api.js'
	import myCache from '@/utils/myCache.js'
	export default {
		data() {
			return {
				title: 'Hello',
				cid:0,
				tabCurrent:0,
				tabList:[],
				banners:[],
				params:{
					'pageId':1,
					'pageSize':10,
				},
				reflectKey:{
					id:'id',
					image:'mainPic',
					price:'actualPrice',
					delPrice:'originalPrice',
					coupon:'couponPrice',
					saleNum:'monthSales',
					platform:'platform'
				},
				dayBlastList:[],
				goodsByCategory:[],
				gradList: [{
						icon: '../../static/icons/taobao.png',
						name: '淘宝'
					},
					{
						icon: '../../static/icons/pinduoduo.png',
						name: '拼多多'
					},
					{
						icon: '../../static/icons/youxuan.png',
						name: '自营优选'
					},
					{
						icon: '../../static/icons/jingdong.png',
						name: '京东'
					},
					{
						icon: '../../static/icons/suning.png',
						name: '苏宁易购'
					},
					{
						icon: '../../static/icons/weipinhui.png',
						name: '唯品会'
					},
					{
						icon: '../../static/icons/baoyou.png',
						name: '9.9包邮'
					},
					{
						icon: '../../static/icons/meituan.png',
						name: '美团'
					},
					{
						icon: '../../static/icons/elm.png',
						name: '饿了么'
					},
					{
						icon: '../../static/icons/miaosha.png',
						name: '今日秒杀'
					},
				],
			}
		},
		onLoad() {
			this.banners=myCache('banners')
			this.tabList=myCache('categories')
			this.dayBlastList=myCache('dayBlastList')
			if(!this.banners){
				getBanners().then(res=>{
					myCache('banners',res)
					this.banners=res
				})
			}
			if(!this.tabList){
				getCategories().then(res=>{
					myCache('categories',res)
					this.tabList=res
				})
			}
			if(!this.dayBlastList){
				getDayBlast(this.params).then(res=>{
					myCache('dayBlastList',res)
					this.dayBlastList=res
				})
			}
		},
		methods: {
			//搜索右侧图标点击事件
			toMessage(){
				console.log('点击了搜索右侧图标')
			},
			tabChange(index){
				this.cid=this.tabList[index].id
				this.tabCurrent=index
				if(index){
					this.getGoodsList(this.cid)
				}
			},
			/**
			 * 获取商品列表
			 */
			getGoodsList(cids){
				uni.showLoading({
					title:'数据加载中...'
				})
				setTimeout(function () {
					uni.hideLoading();
				}, 20000);
				this.goodsByCategory=myCache('goodsByCategory_'+cids)
				if(!this.goodsByCategory){
					getGoods({cids:cids,pageSize:20}).then(res=>{
						myCache('goodsByCategory_'+cids,res,60)
						this.goodsByCategory=res
						uni.hideLoading()
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.banner-box{
		padding: 20rpx;
		position: relative;
		// margin-bottom: 20rpx;
		.swiper-item{
			border-radius: 8px;
			overflow: hidden;
			image{
				width: 100%;
				border-radius: 8px;
			}
		}
	}
	.between-line{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #111;
		font-weight: bold;
		text{
			margin: 0 5px;
		}
		.line{
			height: 1rpx;
			width: 90rpx;
			background-color: #8c8c8c;
		}
	}
	.bor-bg{
		border: none;
		position: absolute;
		top: 0;
		left: -12%;
		right: -12%;
		height: 240rpx;
		background-color: #8F4B2B;
		border-radius: 0 0 50% 50%;
	}
	.category{
		padding: 30rpx;
	}
</style>
